<template>
  <PageContainer>
    <view class="container">
      <Header title="分组管理" :isBoxShadow="false" />

      <template v-for="(v, i) in dataList" :key="i">
        <view
          class="cardBox py-18 pl-24 br-5 bgf mt-10 mx-10"
          :class="isChecked ? 'pr-30' : 'pr-15'"
          @click="checkedChange(v)"
        >
          <view class="ov-1">{{ v.name }}</view>
          <view class="disFlxJS fz-12 color8 pt-6">
            <view>共{{ v?.photoAlbumNum ?? 0 }}个相册, {{ v?.photoNum ?? 0 }}张图片</view>
            <view v-if="!isChecked" class="disFlxAC">
              <view @click="openDeleteModel(v)">
                <text class="ali-icon fz-15">&#xe621;</text>
                <text>删除</text>
              </view>
              <view class="pl-15" @click="openEditModal(v)">
                <text class="ali-icon fz-15">&#xe611;</text>
                <text>编辑</text>
              </view>
            </view>
          </view>
          <view class="badgeBox">{{ v.sort }}</view>
          <view v-if="isChecked" class="checkedBox">
            <image
              v-if="checkedId === v.id"
              src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/radio-checked2.png"
              style="width: 32rpx; height: 32rpx"
            />
            <image v-else src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/radio.png" style="width: 32rpx; height: 32rpx" />
          </view>
        </view>
      </template>

      <view class="py-50" v-if="!dataList.length && !loading">
        <Empty></Empty>
      </view>

      <TButtonGroup position="fixed">
        <TButton
          class="gutter-btn"
          customClass="borderBtn"
          text="新建分组"
          icon="&#xe8df;"
          @click="openAddModal"
        />
      </TButtonGroup>

      <ShowModal
        v-model="editVisible"
        :title="editTitle"
        confirm-text="确认"
        :confirmAutoClose="false"
        @confirm="confirmEdit"
      >
        <template #content>
          <view class="inputBox mt-15">
            <FormInput
              v-model.trim="editGroupObj.name"
              placeholder="输入分组名称,限制8个字"
              :inputBorder="false"
              :maxlength="8"
            />
          </view>
          <view class="inputBox">
            <FormInput
              v-model="editGroupObj.sort"
              placeholder="分组排序，序号越小越靠前"
              :inputBorder="false"
              type="number"
            />
          </view>
        </template>
      </ShowModal>

      <ShowModal
        v-model="deleteVisible"
        title="确认删除组"
        content="组删除后组下的所有相册和图片将被删除"
        confirm-text="确认"
        @confirm="confirmDelete"
      ></ShowModal>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* photosGroup 分组管理 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { ref, unref, reactive } from 'vue';
  import type { EditPhotosGroupData } from '@/api/admin/types';
  import { photoAlbumGroupList } from '@/api/photoAlbum';
  import type { PhotoAlbumGroupListResult } from '@/api/photoAlbum/types';
  import {
    addPhotoAlbumGroup,
    modifyPhotoAlbumGroup,
    forceDelPhotoAlbumGroup,
  } from '@/api/admin/index';
  import { navigateBack, onLoad } from '@/router';
  import ShowModal from '@/components/ShowModal/index.vue';
  import FormInput from '@/components/Form/components/FormInput.vue';
  import { Toast } from '@/utils/index';
  import Empty from '@/components/Empty/Empty.vue';

  // 获取分组列表
  const dataList = ref<PhotoAlbumGroupListResult[]>([]);
  const loading = ref(true);
  const getGourpList = function () {
    loading.value = true;
    photoAlbumGroupList()
      .then((res) => {
        dataList.value = res;
        loading.value = false;
      })
      .catch(() => {
        loading.value = false;
      });
  };
  const isChecked = ref(false); // 是否为选择分组
  const checkedId = ref<number>(0); // 当前选中分组
  onLoad((op) => {
    if (op.isChecked) {
      isChecked.value = true;
      checkedId.value = op?.checkedId ?? 0;
    }
    getGourpList();
  });

  // 勾选分组
  const checkedChange = (v: PhotoAlbumGroupListResult) => {
    if (!unref(isChecked)) return;
    checkedId.value = v.id || 0;
    uni.setStorageSync('_CLICK_INFO', {
      type: 'checkedPhotosGroup',
      ...v,
    });
    setTimeout(() => {
      navigateBack();
    }, 200);
  };

  // 分组编辑 新建弹窗
  const editVisible = ref(false);
  const editGroupObj = reactive<EditPhotosGroupData>({
    id: undefined,
    name: '',
    sort: '',
  });
  const editTitle = ref('新建分组');
  const openAddModal = () => {
    editGroupObj.id = undefined;
    editGroupObj.name = '';
    editGroupObj.sort = '';
    editTitle.value = '新建分组';
    editVisible.value = true;
  };
  const openEditModal = (row: PhotoAlbumGroupListResult) => {
    editGroupObj.id = row.id;
    editGroupObj.name = row.name;
    editGroupObj.sort = String(row.sort);
    editTitle.value = '编辑分组';
    editVisible.value = true;
  };
  const confirmEdit = async () => {
    if (!editGroupObj.name) {
      Toast('分组名称不能为空');
      return;
    }
    if (editGroupObj.id) {
      await modifyPhotoAlbumGroup(editGroupObj);
    } else {
      await addPhotoAlbumGroup(editGroupObj);
      Toast('新建成功');
    }
    editVisible.value = false;
    getGourpList();
  };

  // 删除分组弹窗
  const deleteVisible = ref(false);
  const openDeleteModel = (row: PhotoAlbumGroupListResult) => {
    deleteVisible.value = true;
    editGroupObj.id = row.id;
  };
  const confirmDelete = async () => {
    await forceDelPhotoAlbumGroup(editGroupObj.id as number);
    getGourpList();
  };
</script>

<style lang="scss" scoped>
  .color8 {
    color: #808080;
  }
  .cardBox {
    position: relative;
    .badgeBox {
      position: absolute;
      left: 0;
      top: 0;
      background: #e5efff;
      border-radius: 10rpx 0 10rpx 0;
      color: #808080;
      line-height: 40rpx;
      padding: 0 12rpx;
    }
    .checkedBox {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .inputBox {
    background-color: #f5f5f5;
    padding: 6rpx;
    margin-bottom: 30rpx;
    width: 500rpx;
  }
</style>
